<!-- 订单详情页面 -->
<template>
  <!-- 导航区域 -->
  <van-nav-bar title="订单详情">
    <template #right>
      <van-icon name="wap-home-o" size="18" @click="backToCart" />
    </template>
  </van-nav-bar>

  <!-- 商品信息 -->
  <van-cell-group :border="false">
    <van-divider content-position="left">
      购买商品信息
    </van-divider>
    <div class="product_list">
      <van-cell
        v-for="cart in cartInfo"
        :key="cart.id"
        class="product"
      >
        <!-- 商品图片 -->
        <img :src="cart?.productInfo?.image">

        <!-- 商品信息 -->
        <div class="info">
          <p class="title">
            {{ cart.productInfo.store_name }}
          </p>
          <p class="price">
            ￥{{ cart.truePrice }}
          </p>
        </div>
        <span class="count">
          ×{{ cart.cart_num }}
        </span>
      </van-cell>
    </div>
  </van-cell-group>

  <!-- 支付信息 -->
  <van-cell-group :border="false">
    <van-divider content-position="left">
      支付信息
    </van-divider>
    <van-cell title="支付金额" :value="payInfo?.payPrice" />
    <van-cell title="支付方式" :value="payInfo?.payType" />
    <van-cell title="支付时间" :value="payInfo?.payTime" />
  </van-cell-group>

  <!-- 收货人信息 -->
  <van-cell-group :border="false">
    <van-divider content-position="left">
      收货人信息
    </van-divider>
    <van-cell title="收货人" :value="customerInfo.userName" />
    <van-cell title="电话" :value="customerInfo.userPhone" />
    <van-cell title="收获地址" :value="customerInfo.userAddress" />
  </van-cell-group>
</template>

<script setup>
// -------------------------------- 导入模块 ---------------------------------
// 导入 vue3 的 API
import { ref, toRefs, computed } from 'vue'
// 导入 vue-router 的 API
import { useRouter } from 'vue-router'

// 导入封装的订单数据接口
// 1、getOrderDetail：获取订单详情
import { getOrderDetail } from '@/api/order_api'

// 导入 vant 组件，按需引入
import {
  NavBar as VanNavBar,
  Icon as VanIcon,
  CellGroup as VanCellGroup,
  Cell as VanCell,
  Divider as VanDivider
} from 'vant'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// -------------------------------- 声明数据 ---------------------------------
// 获取父组件传值
const props = defineProps({
  // 订单 id
  orderId: {
    type: String,
    required: true
  }
})
const { orderId } = toRefs(props) // 订单 id

const router = useRouter() // 初始化路由实例
const orderDetail = ref({}) // 订单详情
const cartInfo = computed(() => orderDetail.value?.cartInfo) // 商品信息
// 支付信息
const payInfo = computed(() => ({
  payPrice: orderDetail.value?.pay_price, // 支付价格
  payTime: orderDetail.value?._pay_time, // 支付时间
  payType: orderDetail.value?.pay_type === 'yue'
    ? '余额支付'
    : orderDetail.value?.pay_type === 'wechat'
      ? '微信支付'
      : '支付宝支付'
}))
// 收货人信息
const customerInfo = computed(() => ({
  userName: orderDetail.value?.real_name, // 收货人姓名
  userAddress: orderDetail.value?.user_address, // 收货人地址
  userPhone: orderDetail.value?.user_phone // 收货人电话
}))

// -------------------------------- 函数封装 ---------------------------------
// 回到购物车页面
const backToCart = () => {
  router.push({
    name: 'cart'
  })
}

// 获取订单详情
const initOrderDetail = async () => {
  const data = await getOrderDetail(orderId.value) // 发送请求
  const result = judgeRequest(data.status, '获取订单详情失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    orderDetail.value = data.data // 获取订单详情
  }
}
// -------------------------------- 函数调用 ---------------------------------
initOrderDetail() // 调用获取订单详情函数
</script>

<style lang="scss" scoped>
.van-cell-group {
  margin-bottom: 10px;
}

.van-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :deep(.van-cell__title) {
    flex: 1;
  }

  :deep(.van-cell__value) {
    flex: 4;
  }
}

// 商品列表区域
.product_list {
  :deep(.van-cell__value) {
    display: flex;
    align-items: center;
  }

  // 商品 item 区域
  .product {
    img {
      width: 70px;
      height: 70px;
    }

    // 商品信息区域
    .info {
      padding-left: 5px;

      .title {
        padding: 0 15px 5px 0;
        // 超过一行显示省略号
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
      }

      .price {
        color: #F2270C;
      }
    }

    .count {
      color: #aaa;
    }
  }
}
</style>
